<html>

<head>
  <title>SOLO GCS</title>
  <meta charset="utf-8" />
  <meta name="apple-mobile-web-app-capable" content="yes"/>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" >
  <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" >
  <meta name="apple-mobile-web-app-title" content="SwarmGCS">
  <link rel="apple-touch-icon" type="image/png" href="./icon_ios.png" />

  <link rel="icon" type="image/png" href="./icon.png" />

  <!-- Bootstrap CSS -->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
    integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous" />

  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
    integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
    crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
    integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
    crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
    integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
    crossorigin="anonymous"></script>
  <script src="./libs/mavlink_bundle.js"></script>
  <script src="./libs/jszip.min.js"></script>
  <script src="./libs/vue.min.js"></script>
  <script src="./libs/roslib.min.js"></script>
  <!-- <script src='./libs/jszip.min.js'></script> -->
  <link rel="stylesheet" type="text/css" href="gcs_common.css">

  <style>
    #swarm-sidebar {
      border-radius: 30px;
      /* background-color: aqua; */
      background-color: rgba(124, 145, 150, 0.8);
      /* filter: blur(10px); */
      /* overflow-y: scroll; */
      height: 50%;
      position: fixed;
      left: 1em;
      top: 5em;
      padding: 5px 15px;
    }
  </style>


</head>

<script id="vertexShader" type="x-shader/x-vertex">
  #extension GL_OES_standard_derivatives : enable
  precision highp float;
  uniform mat4 modelViewMatrix;
  uniform mat4 projectionMatrix;
  attribute vec3 position;
  attribute vec3 offset;
  varying vec4 vColor;
  attribute vec4 ca;
  // attribute vec4 edgeColor;

  // varying vec4 vedgeColor;
  attribute vec2 uv;
  varying vec2 vUv;


  void main() {
    //vedgeColor = edgeColor;
    gl_Position = projectionMatrix * modelViewMatrix * vec4( offset + position, 1.0 );
    vColor = ca;
    vUv = uv;
  }
</script>

<script id="fshader" type="x-shader/x-fragment">
  precision highp float;
  varying vec4 vColor;
  varying vec2 vUv;

  bool is_border() {
    float vEdgeWidth = 0.05;
    return vUv.x > 1.0 - vEdgeWidth || vUv.x < vEdgeWidth|| vUv.y > 1.0 - vEdgeWidth || vUv.y < vEdgeWidth  ;
  }
  void main() {
    if (is_border()) {
      gl_FragColor = vec4(0.043, 0.235, 0.431, 1.0);

    } else {
      gl_FragColor = vColor;

    }
  }
</script>


<body draggable="false"  ontouchstart=””>
  <div id="urdf"></div>

  <div class="container-fluid" style="width: 100%" id="container">

    <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
      <a class="navbar-brand" href="#" v-on:click="toggle_fullscreen()">SOLO GCS</a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
        aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      
      <button type="button" v-on:click="range_select" class="btn btn-primary btn-lg"
      id="range_select">
      <img src="material-design-icons/content/drawable-xxxhdpi/ic_select_all_white_48dp.png" class="small_icon" />
      Select</button>

      <div class="collapse navbar-collapse my-2 my-lg-0" id="navbarSupportedContent">
        <ul class="nav navbar-nav navbar-center ml-auto">
          <li class="nav-item active">
            <a class="nav-link" href="#" v-bind:style="{ color: ros_conn_color }">ROS: {{ros_conn}}</a>
          </li>

          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown"
              aria-haspopup="true" aria-expanded="false">
              SERVER_IP:{{server_ip}}
            </a>
            <div class="dropdown-menu" aria-labelledby="navbarDropdown">
              <!-- <a class="dropdown-item" href="#" v-on:click="set_server_ip('127.0.0.1')">LOCALHOST</a> -->
              <a class="dropdown-item" href="#" v-for="(_ip, _i) in server_ip_list"
                v-on:click="set_server_ip(_ip)">{{_ip}}</a>
            </div>
          </li>

          <li class="nav-item">
            <a class="nav-link disabled lps_time" href="#" tabindex="-1" aria-disabled="true"
              v-bind:style="{ color: lps_time_color }">ROS_TIME {{lps_time}}</a>
          </li>
        </ul>
        <!-- <form class="form-inline my-2 my-lg-0">
            <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
            <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
          </form> -->
      </div>
    </nav>

    <div class="row" style="height: 90%"></div>
    <transition name="slide-fade">
      <div v-if="! is_wrap_swarm" class="container-fluid col-2 container-fluid" id="swarm-sidebar">
        <h2 id="SWARM">UAV</h2>
        <img src="material-design-icons/navigation/drawable-hdpi/ic_expand_less_white_48dp.png" 
        class="middle_icon" 
        style="position: absolute; right:1em; top:1em;"
        v-on:click="wrap_swarm()"
        />
        <hr/>
        <div class="uav-list">
          <uav-component class="uav_comp" v-for="(_status, status) in uavs" v-bind:_id="_status._id"
          v-bind:status="_status"></uav-component>
        </div>
      </div>
      <div v-else class="container-fluid col-2 container-fluid" id="swarm-sidebar-wrap">
          <h2 id="SWARM">UAV</h2>
          <img src="material-design-icons/navigation/drawable-hdpi/ic_expand_more_white_48dp.png" 
          class="middle_icon" 
          style="position: absolute; right:1em; top:1em;"
          v-on:click="unwrap_swarm()"
          />
          <hr/>
      </div>
    </transition>

    <div style="position: fixed; left:1em; bottom:1em" id="stats"></div>
        <div id="cmdAera">
        <h4>Command Aera: <span id="select_id" style="color:red"> 
          <img src="material-design-icons/maps/drawable-xxxhdpi/ic_flight_white_48dp.png" style="height: 1.4em; width: 1.4em;" />
          {{selected_uav}} </span></h4>
        <div>
          <button type="button" v-on:click="command('takeoff')" class="btn btn-lg btn-primary" id="takeoff">
            <img src="material-design-icons/action/drawable-xxxhdpi/ic_flight_takeoff_white_48dp.png" class="small_icon" />
            Takeoff
          </button>
          <button type="button" v-on:click="command('landing')" class="btn btn-primary btn-lg" id="landing">
              <img src="material-design-icons/action/drawable-xxxhdpi/ic_flight_land_white_48dp.png" class="small_icon" />
            Landing</button>
          <button type="button" v-on:click="command('emergency')" class="btn btn-primary btn-lg" style="color:red" id="emlanding">
            <img src="material-design-icons/alert/drawable-xxxhdpi/ic_warning_white_48dp.png" class="small_icon" />
            Emergency
          </button>
          <button type="button" v-on:click="command('flyto')" class="btn btn-primary btn-lg" style="color:red"
            id="flyto">
            <img src="material-design-icons/content/drawable-xxxhdpi/ic_forward_white_48dp.png" class="small_icon" />
            Flyto</button>
            <button type="button" v-on:click="range_select" class="btn btn-primary btn-lg"
            id="range_select">
            <img src="material-design-icons/content/drawable-xxxhdpi/ic_select_all_white_48dp.png" class="small_icon" />
            Select</button>
          <hr />
          <button type="button" class="btn btn-lg btn-secondary">Mission A</button>
          <button type="button" class="btn btn-secondary btn-lg">Mission B</button>
        </div>
        <!-- <button type="button" class="btn btn-secondary btn-lg" >Mission C</button> -->
        <!-- <button type="button" class="btn btn-secondary btn-lg" >Mission D</button> -->
      </div>
  </div>

  <script type="module">
    import { SoloCommander } from './src/solo_commander.mjs';
    import { SwarmGCSUI } from "./src/gcs_view.mjs";
    var ui = new SwarmGCSUI({}, {
      chessboard:false,
      grid: true
    });
    // console.log(ui);
    var sc = new SoloCommander(ui);

  </script>
</body>

</html>